<template>
    <div class="multiple-image">
        <ul class="lists" v-if="limit > 1">
            <li v-for="(file,key) in fileLists" :key="key">
                <img :src="file.url" alt="">
                <div class="progress" v-if="file.status!='success'">
                    <div class="progress" :style="{height:(100-file.percentage)+'%'}"/>
                </div>
                <div class="action" v-show="file.status=='success'">
                    <span><i class="el-icon-arrow-left" @click="moveLeft(key)"/></span>
                    <span><i class="el-icon-arrow-right" @click="moveRight(key)"/></span>
                    <span><i class="el-icon-eye" @click="preview(file.url)"/></span>
                    <span><i class="el-icon-delete" @click="remove(file)"/></span>
                </div>
            </li>
        </ul>
        <ul class="lists" v-else>
            <li v-for="(file,key) in fileLists" :key="key" :style="{width:width,height:height}">
                <img :src="file.url" alt="">
                <div class="progress" v-if="file.status!='success'">
                    <div class="progress" :style="{height:(100-file.percentage)+'%'}"/>
                </div>
                <div class="action single text-center" v-show="file.status=='success'">
                    <span><i class="el-icon-eye" @click="preview(file.url)"/></span>
                    <span><i class="el-icon-delete" @click="remove(file)"/></span>
                </div>
            </li>
        </ul>
        <el-upload ref="upload"
                   :class="limit >1 ? 'multiple-btn':'block'"
                   :multiple="limit>1"
                   v-show="fileLists.length < limit"
                   action="/a/upload/local"
                   list-type="picture"
                   accept=".png,.jpg,.jpeg"
                   :show-file-list="false"
                   :limit="limit"
                   :file-list="files"
                   :headers="headers"
                   :on-exceed="exceed"
                   :on-remove="remove"
                   :on-error="error"
                   :on-success="success"
                   :before-upload="beforeUpload"
                   :on-change="change">
            <i v-if="limit >1" class="el-icon-plus" style="font-size: 28px;margin-top: 10px;"/>
            <el-button v-else type="primary">选择文件</el-button>
        </el-upload>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                set: true,
                fileLists: [],
                headers: {'Authorize': window.localStorage.getItem('ak')},
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        props: {
            width: {
                type: String,
                default: '100px',
            },
            height: {
                type: String,
                default: '100px',
            },
            value: {
                type: String,
                default: '',
            },
            limit: {
                type: Number,
                default: 1,
            },
            size: {
                type: Number,
                default: 2,
            }
        },
        model: {
            props: 'value'
        },
        computed: {
            files: {
                get() {
                    if (this.value) {
                        if (this.set) {
                            this.set = false;
                            this.value.split(',').forEach(item => {
                                this.fileLists.push({
                                    name: '',
                                    url: item,
                                    status: 'success'
                                })
                            })
                        }
                        return this.fileLists;
                    } else {
                        return [];
                    }
                }
            }
        },
        methods: {
            change(file, fileList) {
                this.set = false;
                // 加入自定义上传列表
                if (file.status == 'ready') {
                    this.fileLists = fileList;
                }
            },
            // 文件上传前
            beforeUpload(file) {
                // 判断文件体积
                if (file.size > this.size * 1048576) {
                    this.$message.warning(`文件不能超过 ${this.size}M`);
                    return false;
                }
                //使用oss上传时用到，判断上传token是否失效
            },
            // 删除
            remove(file) {
                for (let key in this.fileLists) {
                    if (this.fileLists[key].uid == file.uid) {
                        // 移除上传列表
                        this.fileLists.splice(key, 1);
                        this.input();
                        break;
                    }
                }
            },
            // 超出文件数量限制提示
            exceed() {
                this.$message.warning(`最多只能上传${this.limit}个文件`)
            },
            // 上传成功
            success(res, file) {
                if (res.code != 1) {
                    this.$message.error(res.msg);
                    // 删除文件
                    this.remove(file)
                } else {
                    this.input();
                }
            },
            // 上传错误
            error() {
                this.$message.error('上传失败，请重新上传');
            },
            // 处理数据返回父组件
            input() {
                let images = [];
                this.fileLists.forEach(img => {
                    if (img.status == 'success') {
                        if (!img.response) {
                            images.push(img.url)
                        } else if (img.response.code == 1) {
                            images.push(img.response.data.url)
                        }
                    }
                })
                this.$emit('input', images.join(','))
            },
            // 预览
            preview(url) {
                this.$preview(url);
            },
            // 左移
            moveLeft(index) {
                let fileList = this.fileLists,
                    file = fileList[index];
                if (index > 0) {
                    let item = fileList[index - 1];
                    fileList.splice(index - 1, 1, file);
                    fileList.splice(index, 1, item);
                    this.input();
                }
            },
            // 右移
            moveRight(index) {
                let fileList = this.fileLists,
                    file = fileList[index];
                if (index < fileList.length - 1) {
                    let item = fileList[index + 1];
                    fileList.splice(index + 1, 1, file);
                    fileList.splice(index, 1, item);
                    this.input();
                }
            },
        }
    }
</script>
